<template>
  <div class="edit-password">
    <el-dialog title="修改密码" center :visible.sync="dialogFormVisible" @close="resetForm('ruleForm')">
      <el-form
        :model="ruleForm"
        status-icon
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
        style="width: 400px; margin: 0 auto;"
      >
        <el-form-item label="原密码" prop="origin_password">
          <el-input v-model="ruleForm.origin_password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="password">
          <el-input v-model="ruleForm.password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="check_password">
          <el-input v-model="ruleForm.check_password" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="resetForm('ruleForm')">取 消</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { updatePassword } from "@/api/user";
import { clearLogin } from '@/libs/util';
export default {
  name: 'edit-password',
  data() {
    var validatePass = (rule, value, callback) => {
      if (value == '') {
        callback(new Error('请输入密码'))
      } else {
        if (this.ruleForm.check_password != '') {
          this.$refs.ruleForm.validateField('check_password')
        }
        callback()
      }
    }
    var validatePass2 = (rule, value, callback) => {
      if (value == '') {
        callback(new Error('请再次输入密码'))
      } else if (value != this.ruleForm.password) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      dialogFormVisible: false,
      ruleForm: {
        password: '',
        check_password: '',
        origin_password: ''
      },
      rules: {
        origin_password: [{
          required: true, message: '请输入原密码', trigger: 'blur'
        }, {
          min: 6,
          max: 20,
          message: '长度在 6 到 20 个字符',
          trigger: 'blur'
        }],
        password: [{
          required: true, validator: validatePass, trigger: 'blur',
        }, {
          min: 6,
          max: 20,
          message: '长度在 6 到 20 个字符',
          trigger: 'blur'
        }],
        check_password: [{ required: true, validator: validatePass2, trigger: 'blur' }, {
          min: 6,
          max: 20,
          message: '长度在 6 到 20 个字符',
          trigger: 'blur'
        }]
      },
      formLabelWidth: '120px'
    }
  },

  methods: {
    // 打开弹窗
    openMask() {
      this.dialogFormVisible = true
    },

    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          console.log(this.ruleForm);
          updatePassword(this.ruleForm).then(res => {
            if (res.result) {
              this.resetForm('ruleForm');
              this.$message.success(res.message);
              clearLogin()
              location.href = '/login';
            } else {
              this.$message.error(res.message);
            }
          }).catch(err => {
            this.$message.error(err.message);
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.dialogFormVisible = false
    }
  }
}
</script>

<style lang="stylus" scoped></style>
